<extend name="Common/base"/>
<block name="title">首页</block>

<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/swiper.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/index.css">
    <style>login
        .swiper-container {
            width: 30rem;
            height: 50rem;
        }
        .swiper-slide {
            background-position: center;
            background-size: 100%;
        }

        .mo {
            position: relative;
            width: 35rem;
            height: 56rem;
            left: 50%;
            top: 30%;
            margin-left: -17.5rem;
            margin-top: -17.5rem;
        }
        .bak  {display: none}
        .link , .service {opacity: 0}
    </style>
</block>
</head>

<block name="canvas">
    <script type="text/paperscript" canvas="canvas3">
        project.currentStyle = {
            fillColor: '#02bec5'
        };

        var ballPositions = [[225, 79], [-20, 9], [425, 73], [120, 259], [336, 256],[536, 263],
	[57, 449],[257, 459], [444, 530], [484, 726], [843, 306], [659, 423],[779, 593],[999, 493], [1090, 193],[639, 82],[869, 42],
	[1292, 428], [1117, 733], [1352, 86], [92, 647]];

        var handle_len_rate = 2.4;
        var circlePaths = [];
        var radius = 1;
        for (var i = 0, l = ballPositions.length; i < l; i++) {
            var circlePath = new Path.Circle({
                center: ballPositions[i],
                radius: 1,
                style: '#fff',
                fillColor: '#fff'
            });
            circlePaths.push(circlePath);
        }

        var largeCircle = new Path.Circle({
            center: [676, 433],
            radius: 1
        });
        circlePaths.push(largeCircle);

        function onMouseMove(event) {
            largeCircle.position = event.point;
            generateConnections(circlePaths);
        }

        var connections = new Group();
        function generateConnections(paths) {
            // Remove the last connection paths:
            connections.removeChildren();

            for (var i = 0, l = paths.length; i < l; i++) {
                for (var j = i - 1; j >= 0; j--) {
                    var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
                    if (path) {
                        connections.appendTop(path);
                        path.removeOnMove();
                    }
                }
            }
        }

        generateConnections(circlePaths);

        // ---------------------------------------------
        function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {

            var center1 = ball1.position;
            var center2 = ball2.position;
            var radius1 = ball1.bounds.width / 2;
            var radius2 = ball2.bounds.width / 2;
            var pi2 = Math.PI / 2;
            var d = center1.getDistance(center2) + 100;
            var u1, u2;

            if (radius1 == 0 || radius2 == 0)
                return;
            if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
                return;
            } else if (d < radius1 + radius2 ) { // case circles are overlapping
                u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
                        (2 * radius1 * d));
                u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
                        (2 * radius2 * d));
            } else {
                u1 = 0;
                u2 = 0;
            }

            var angle1 = (center2 - center1).getAngleInRadians();
            var angle2 = Math.acos((radius1 - radius2) / d);
            var angle1a = angle1 + u1 + (angle2 - u1) * v;
            var angle1b = angle1 - u1 - (angle2 - u1) * v;
            var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
            var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
            var p1a = center1 + getVector(angle1a, radius1);
            var p1b = center1 + getVector(angle1b, radius1);
            var p2a = center2 + getVector(angle2a, radius2);
            var p2b = center2 + getVector(angle2b, radius2);

            // define handle length by the distance between
            // both ends of the curve to draw
            var totalRadius = (radius1 + radius2);
            var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);

            // case circles are overlapping:
            d2 *= Math.min(1, d * 2 / (radius1 + radius2));

            radius1 *= d2;
            radius2 *= d2;

            var path = new Path({
                segments: [p1a, p2a, p2b, p1b],
                style: ball1.style,
                closed: true
            });
            var segments = path.segments;
            segments[0].handleOut = getVector(angle1a - pi2, radius1);
            segments[1].handleIn = getVector(angle2a + pi2, radius2);
            segments[2].handleOut = getVector(angle2b - pi2, radius2);
            segments[3].handleIn = getVector(angle1b + pi2, radius1);
            return path;
        }

        // ------------------------------------------------
        function getVector(radians, length) {
            return new Point({
                // Convert radians to degrees:
                angle: radians * 180 / Math.PI,
                length: length
            });
        }
    </script>
</block>

<block name="content">
    <div class="section">
        <canvas id="canvas3" resize style="position: absolute;width: 100%;height:100%;z-index: 1"></canvas>
        <div class="header-title">
            <h2 class="cn-title">课程体系</h2>
            <h3 class="en-title">CURRICULUM</h3>
        </div>
        <div class="box">
            <div class="sunline">
                <p class=" ms-icon ms-icon-php earthline" data-url="{:U('kecheng')}" style="color: #02a7c5"  data-toggle="tooltip" data-placement="right" title="PHP开发"></p>
                <p class=" ms-icon ms-icon-html5 earthline" data-url="{:U('kecheng')}" style="color: #02bec5" data-toggle="tooltip" data-placement="left" title="前端开发"></p>
                <p class=" ms-icon ms-icon-sumiao earthline" data-url="{:U('kecheng')}" style="color: #025ec5" data-toggle="tooltip" data-placement="left" title="素描"></p>
                <p class=" ms-icon ms-icon-pingmian earthline" data-url="{:U('kecheng')}" style="color: #02c595" data-toggle="tooltip" data-placement="top" title="设计"></p>
                <p class=" ms-icon ms-icon-world earthline" data-url="{:U('kecheng')}" style="color: #0295c5" data-toggle="tooltip" data-placement="right" title="网站开发"></p>
                <p class=" ms-icon ms-icon-computer earthline" data-url="{:U('kecheng')}" style="color: #025ec5" data-toggle="tooltip" data-placement="right" title="互联网视觉"></p>
                <div class="sun">课程体系</div>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="header-title">
            <h2 class="cn-title">学员作品</h2>
            <h3 class="en-title">STUDENT WORK</h3>
        </div>
        <div class="tubiao pc">
            <div class="items">
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui1.png" alt=""></div>
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui2.png" alt=""></div>
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui3.png" alt=""></div>
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui4.png" alt=""></div>
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui5.png" alt=""></div>
                <div class="item" data-url="{:U('product')}"><img src="../../../../Public/Home/images/ui6.png" alt=""></div>
            </div>
        </div>
        <div class="mo ">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui1.png)"></div>
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui2.png)"></div>
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui3.png)"></div>
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui4.png)"></div>
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui5.png)"></div>
                    <div class="swiper-slide" style="background-image:url(../../../../Public/Home/images/ui6.png)"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="header-title" style="padding-top: 1rem; padding-bottom: 1.9rem">
            <h2 class="cn-title">强大的生态群</h2>
            <h3 class="en-title">各大企业网站都在使用PHP编写</h3>
        </div>
        <div class="row link">
            <div class="col-md-8 col-md-push-2 col-sm-8 col-sm-push-2 col-xs-10 col-xs-push-1">
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link1.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link1_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link2.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link2_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link3.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link3_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link4.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link4_bak.png" alt="">
                </div>
            </div>
        </div>
        <div class="row link">
            <div class="col-md-8 col-md-push-2 col-sm-8 col-sm-push-2 col-xs-10 col-xs-push-1">
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link5.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link5_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link6.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link6_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link7.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link7_bak.png" alt="">
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <img class="zhen" src="../../../../Public/Home/images/link8.png" alt="">
                    <img class="bak" src="../../../../Public/Home/images/link8_bak.png" alt="">
                </div>
            </div>
        </div>
        <div class="row case">
            <div class="row">
                <div class="col-md-4 col-md-push-2 col-xs-6 col-sm-6">
                    <img src="../../../../Public/Home/images/case1.png" alt="">
                    <div class="case_layer">
                        <h5>小程序</h5>
                    </div>
                </div>
                <div class="col-md-4 col-md-push-2 col-xs-6 col-sm-6">
                    <img src="../../../../Public/Home/images/case2.png" alt="">
                    <div class="case_layer">
                        <h5>管理系统</h5>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-2 col-xs-6 col-sm-6">
                    <img src="../../../../Public/Home/images/case3.png" alt="">
                    <div class="case_layer">
                        <h5>论坛</h5>
                    </div>
                </div>
                <div class="col-md-4 col-md-push-2 col-xs-6 col-sm-6">
                    <img src="../../../../Public/Home/images/case4.png" alt="">
                    <div class="case_layer">
                        <h5>商城系统</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="footer_content">
    <div class="header-title">
        <h2 class="cn-title">服务中心</h2>
        <h3 class="en-title">SERVICE PROJECT</h3>
    </div>
    <div class="service row">
        <div class="col-md-3 col-sm-6 col-xs-6 sicon-wrapper">
            <div class="service-icon ">
                <p class=" ms-icon ms-icon-lisen" ></p>
                <h4 data-url="{:U('listen#a')}">免费试听</h4>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6 sicon-wrapper">
            <div class="service-icon ">
                <p class=" ms-icon ms-icon-book" data-url="123"></p>
                <h4 data-url="{:U('listen#a')}">在线报名</h4>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6 sicon-wrapper">
            <div class="service-icon ">
                <p class=" ms-icon ms-icon-clock" data-url="123"></p>
                <h4 data-url="{:U('listen#qa')}">开班时间</h4>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6 sicon-wrapper">
            <div class="service-icon ">
                <p class=" ms-icon ms-icon-bus" data-url="123"></p>
                <h4 data-url="{:U('aboutus#content')}">乘车路线</h4>
            </div>
        </div>
    </div>
</block>

<block name="js">
    <script src="__PUBLIC__/Home/scripts/swiper.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
        $(function(){
            $('.container').fullpage({
                afterLoad:function(link, index){
                    if (index == 4) {
                        $('.case_layer h5').hide();
                        $('.case_layer').addClass('animated bounceInUp').find('h5').show().addClass('animated rotateInUpLeft');
                    }
                    $('.section').eq(index-1).find('.header-title').css('opacity',1).addClass('animated bounceInUp');
                    $('.section').eq(index-1).find('.link').css('opacity',1).addClass('animated bounceInLeft');
                    $('.section').eq(index-1).find('.service').css('opacity',1).addClass('animated zoomIn');
                },
                verticalCentered : false,
                resize : true
            });
            $('.dot').click(function () {
                location = $(this).data('url')
            })


            $('.item').click(function () {
                location = $(this).data('url')
            })

            $('.service h4').click(function () {
                location = $(this).data('url')
            })

            $('.item').mouseenter(function () {
//                $(this).parent().css('animation' , 'aa');
//                $(this).parent().css('animation' , 'autoMove 8s infinite linear');
//                $(this).css('animation' , '');
            })



            var itemNum = 6;//要旋转的div的数量
            var itemDeg = 360 / itemNum;//计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度

            $('.item').each(function(index){
                $(this).css('transform' , 'rotateY('+(itemDeg *  (index)) + "deg) translateZ(280px)");
            });

            $('.case_layer').parent().mouseover(function () {
                $(this).find('.case_layer').toggle()
            })
            $('.case_layer').parent().mouseout(function () {
                $(this).find('.case_layer').toggle()
            })

            $('.service .sicon-wrapper').height($('.service .sicon-wrapper').width());
            $('.service .sicon-wrapper').css('line-height' , $('.service .sicon-wrapper').height() + 'px');
            // transform js

        });
    </script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            autoplay : 1000,
            grabCursor: true,
            cube: {
                slidesPerView: 3,
                centeredSlides: true
            }
        });


        $(function(){
           $('.zhen').hover(function(){
               $('.zhen').show();
               $('.bak').hide();
               $(this).hide();
               $(this).next('.bak').show();
           })

        })
    </script>
</block>
